<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/userinfo.css"/>
		<style>
			label {
			    display: inline-block;
			    max-width: 100%;
			    margin-bottom: 5px;
			    font-weight: 700;
			    font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header class="header">
				<a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>{{title}}</h1>
			</header>
			<ul class="list">
				<li v-for="(list,index) in lists">
					<div class="left">
						{{list.text}}
					</div>
					<div class="right" v-html="list.data"></div>
				</li>
			</ul>
			<div role="dialog" class="modal fade" id="layer">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<p class="modal-title">填写信息</p>
						</div>
						<div class="modal-body ">
							<form>
								<div class="form-group">
									<label for="name">联系人</label>
									<input type="text" class="form-control" id="name">
								</div>
								<div class="form-group">
									<label for="position">职位</label>
									<input type="text" class="form-control" id="position" >
								</div>
								<div class="form-group">
									<label for="tel">手机号</label>
									<input type="text" class="form-control" maxlength="11" id="tel">
								</div>
							</form>	
						</div>
						<div class="modal-footer text-right">
							<button data-dismiss="modal" class="btn btn-primary">取消</button>
							<button data-dismiss="modal" class="btn btn-danger" @click="confirm">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/bootstrap.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var operation;
			var dom;
			var vm = new Vue({
				el:"#app",
				data:{
					title:"ahfsaf",
					lists:[]
				},
				created:function(){
					    var titles = ["合作信息","资质信息","账户信息","供应商联系信息","服务中心","意见反馈"];
						var str = window.location.search.split("?")[1];//取地址参数部分
						this.title = titles[str];
					    this.$http.get('/supinfo/supplier_info',{emulateJSON: true}).then(function (res) {		//初始化数据
			               		this.getinfo(res,str);			              
			              },function (res) {
								this.error(res);
			              });
				},
				methods:{
					confirm:function(){
						if(operation == "edit"){				//编辑提交
							var span = $(dom).parents('.right').find('span');					
							this.$http.post('/supinfo/update_linkman',{
				                    id : $(dom).parents(".infobox").attr('id'),
				                    name : $("#name").val(),
				                    position : $("#position").val(),
				                    tel : $("#tel").val()
				                },{emulateJSON: true}).then(function (res) {
					                    span.eq(0).text(res.data.data.name);
									    span.eq(1).text(res.data.data.position);
										span.eq(2).text(res.data.data.tel);
				                },function (res) {
										this.error(res);
				                });
							
						};
						if(operation == "add"){					//新增提交
							this.$http.post('/supinfo/add_linkman',{
			                    name : $("#name").val(),
			                    position : $("#position").val(),
			                    tel : $("#tel").val()
			                },{emulateJSON: true}).then(function (res) {
			                    console.log(res);
					            vm.lists.push({
									text:'联系人',
									data:'<div class="infobox" id=""><span>'+res.data.data.name+'</span><span>'+res.data.data.position+'</span><span>'+res.data.data.tel+'</span><button class="btn btn-xs btn-info" onclick="edit(this)">编辑</buton></div>'
								});      
			                },function (res) {
									this.error(res);
			                });							
						}
						
					},
					error:function(res){	//错误抛出
						console.error("错误类型:"+res.status,"错误描述:"+res.statusText);
					},
					getinfo:function(res,str){
					    console.info(res.data.data.cooperation);
						if(str==0){					//合作信息渲染
							var arr = new Array();
							var arrtext = ["合作方式","结算方式","配送方式","配送条件","建档日期"]; 
							for(var i in res.data.data.cooperation){
								arr[i]={
									text:arrtext[i],
									data:res.data.data.cooperation[i]
								};			          
			               }
							this.lists = arr;
						};
						if(str==2){					//账户信息渲染
							var arr = new Array();
							var arrtext = ["账户名称","开户行","账号"]; 
							for(var i in res.data.data.account){
								arr[i]={
									text:arrtext[i],
									data:res.data.data.account[i]
								};	
							}
							this.lists = arr;
						};
						if(str==3){					//供应商信息渲染		
							var arr = new Array();
							var arrtext = "联系人";
							console.log(res.data.data.contact);
							for(var i in res.data.data.contact){
							    console.info('111');
								arr[i]={
									text:arrtext,
									data:'<div class="infobox" id="'+res.data.data.contact[i].id+'"><span>'+res.data.data.contact[i].name+'</span><span>'+res.data.data.contact[i].position+'</span><span>'+res.data.data.contact[i].tel+'</span><button class="btn btn-xs btn-info" onclick="edit(this)">编辑</buton></div>'
								};	
							};
							$('#app').append('<div id="add"><button class="btn btn-info">添加联系人</button></div>');
							this.lists = arr;
							$('#app button').click(function(){		//新增点击
								operation ="add";
								$("#name").val('');
								$("#position").val('');
								$("#tel").val('');
								$('#layer').modal();
							});
						};
					}
				}
			});
			function edit(elem){			//编辑点击
				dom = elem;
				operation ="edit";
				var span = $(dom).parents('.right').find('span');
				$("#name").val(span.eq(0).text());
				$("#position").val(span.eq(1).text());
				$("#tel").val(span.eq(2).text());
				$('#layer').modal();			
			};			
		</script>
	</body>
</html>
